<template>
  <el-card class="box-card" v-if="$store.state.user.userInfo.role === 1">
    <div class="card-header">
      <span>管理员选项</span>
      <el-button type="primary" class="button" @click="dialogFormVisible = true">发布通知</el-button>
    </div>
  </el-card>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames">
      <el-collapse-item :name="item.id" v-for="item in notices" :key="item.id">
        <template #title>
          <div class="title-box">
            <div class="title">{{ item.title }}</div>
            <div class="person">
              <div class="username">发布人：{{ item.username }}</div>
              <div class="pubtime">发布时间：{{ formatTime(item.pubtime) }}</div>
            </div>
          </div>
        </template>
        <div>{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
  </div>

  <el-dialog v-model="dialogFormVisible" title="发布通知">
    <el-form ref="ruleFormRef" :model="pubnotice" :rules="rules" status-icon>
      <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
        <el-input v-model="pubnotice.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth" prop="content">
        <el-input v-model="pubnotice.content" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRef } from 'vue'
import $http from '@/request/http'
import { initNoticeData } from '@/type/noticeData'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const $store = useStore()

const activeNames = ref([])

const data = reactive(new initNoticeData())
async function getNotices() {
  const { data: res } = await $http.get('/api/notices/getnotices')
  data.notices = res.data.reverse()
}
onMounted(getNotices)
const notices = toRef(data, 'notices')
const pubnotice = toRef(data, 'pubnotice')

const dialogFormVisible = ref<boolean>(false)
const formLabelWidth = '80px'

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
  content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (!valid) return ElMessage.error('表单验证不通过')
    const { data: res } = await $http.post('/api/notices/pubnotice', pubnotice.value)
    if (res.status === 1) return ElMessage.error(res.message)
    ElMessage.success('发布成功')
    dialogFormVisible.value = false
    getNotices()
  })
}

function formatTime(date: Date) {
  const dt = new Date(date)
  let y = dt.getFullYear()
  let m = padZero(dt.getMonth() + 1)
  let d = padZero(dt.getDate())
  let h = padZero(dt.getHours())
  let mm = padZero(dt.getMinutes())
  let s = padZero(dt.getSeconds())
  return `${y}-${m}-${d} ${h}:${mm}:${s}`
}
function padZero(n: number) {
  return n > 9 ? n : '0' + n
}
</script>

<style lang="less" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 100%;
  font-size: 20px;
  letter-spacing: 2px;
}
.title-box {
  width: 90%;
  display: flex;
  justify-content: space-between;
  .person {
    display: flex;
    .username {
      margin-right: 20px;
    }
  }
}
</style>
